<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>分角色供应链管理系统</title>
    <style>
        /* 基础样式保持首次设计 */
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
        }

        .flowchart {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
            margin: 40px 0;
        }

        .step {
            width: 160px;
            padding: 20px;
            background: #f0f8ff;
            border: 2px solid;
            border-radius: 10px;
            text-align: center;
            position: relative;
        }

        .connector {
            position: absolute;
            top: 50%;
            left: 100%;
            width: 36px;
            height: 6px;
            background: currentColor;
        }

        .connector::after {
            content: '▶';
            position: absolute;
            right: -10px;
            top: -9px;
            color: currentColor;
        }

        /* 角色颜色主题 */
        .role-section {
            margin: 60px 0;
            padding: 30px 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        /* 采购角色 - 蓝色主题 */
        .procurement .step { border-color: #2196F3; }
        .procurement .connector,
        .procurement h2 { color: #2196F3; }

        /* 库存角色 - 绿色主题 */
        .inventory .step { border-color: #4CAF50; }
        .inventory .connector,
        .inventory h2 { color: #4CAF50; }

        /* 物流角色 - 橙色主题 */
        .logistics .step { border-color: #FF9800; }
        .logistics .connector,
        .logistics h2 { color: #FF9800; }

        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 40px;
        }

        h2 {
            text-align: center;
            margin: 20px 0 40px;
            font-size: 1.5em;
        }

        .explanation {
            background: #f9f9f9;
            padding: 20px;
            border-left: 4px solid;
            margin: 30px auto;
            max-width: 800px;
        }

        /* 动态颜色继承 */
        .procurement .explanation { border-color: #2196F3; }
        .inventory .explanation { border-color: #4CAF50; }
        .logistics .explanation { border-color: #FF9800; }
    </style>
</head>
<body>
    <h1>供应链管理系统使用说明</h1>

    <!-- 库存流程 -->
    <section class="role-section inventory">
        <h2>📦 管理人员操作</h2>
        <div class="flowchart">
            <div class="step">1、配置基础信息<div class="connector"></div></div>
            <div class="step">2、配置角色权限<div class="connector"></div></div>
            <div class="step">3、分配用户角色</div>
        </div>
        <div class="explanation">
            <p><strong>流程说明：</strong> </p>
            <p><strong>1.配置基础信息：</strong>配置公司主体；配置公司对公账户；</p>
            <p><strong>2.配置角色权限：</strong>设置角色，分配菜单权限、查看和编辑权限。</p>
            <p><strong>3.分配用户角色：</strong>根据用户分配对应角色。</p>
            <p><strong>4.常规管理：</strong>可以调整用户禁用启用、用户角色分配、重置密码、查看操作日志。</p>
        </div>
    </section>

    <!-- 采购流程 -->
    <section class="role-section procurement">
        <h2>📦 销售人员流程</h2>
        <div class="flowchart">
            <div class="step">添加客户<div class="connector"></div></div>
            <div class="step">新建商机<div class="connector"></div></div>
            <div class="step">新增对应商品<div class="connector"></div></div>
            <div class="step">新增销售合同<div class="connector"></div></div>
            <div class="step">新增采购合同<div class="connector"></div></div>
            <div class="step">新建采购单<div class="connector"></div></div>
            <div class="step">产品入库<div class="connector"></div></div>
            <div class="step">产品出库<div class="connector"></div></div>
            <div class="step">填写财务信息<div class="connector"></div></div>
            <div class="step">进行售后跟进及管理<div class="connector"></div></div>
            <div class="step">查看项目相关统计信息</div>
        </div>
        <div class="explanation">
            <p><strong>流程说明：</strong><br></p>
            <p><strong>1.添加客户：</strong>添加客户信息、配置客户开户信息；</p>
            <p><strong>2.新建商机：</strong>添加商机，填写商机相关的公司、产品信息；并进行商机跟进和管理；</p>
            <p><strong>3.新增商品：</strong>新增对应商机的商品信息，型号、规格等信息（如平台已有，可跳过此步骤）；</p>
            <p><strong>4.新增销售合同：</strong>填写销售合同相关的商机信息、企业信息、项目信息、产品信息</p>
            <p><strong>5.新增对应采购合同：</strong>填写采购合同对应的销售信息、项目信息、采购清单；</p>
            <p><strong>6.产品入库、出库：</strong>对采购商品进行质检和入库登记，更新库存记录；以及后续的出库操作等；。</p>
            <p><strong>7.财务信息：</strong>填写合同相关开票信息、收款信息、收票信息和付款信息；</p>
            <p><strong>8.售后管理：</strong>根据合同进行售后工单管理，完成供应链闭环。</p>
        </div>
    </section>
</body>
</html>